<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>zhezhao.html</title>
	<style type="text/css">
		#zhezhao {
			background: #000;
		    filter: alpha(opacity=10); /* IE的透明度 */
		    opacity: 0.1;  /* 透明度 */
		    display: block;
		    position: absolute;
		    top: 0px;
		    left: 0px;
		    width: 100%;
		    height: 100%;
		    z-index: 1; /* 此处的图层要大于页面 */
		    display:none;
		}
	</style>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  	<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
  	<script type="text/javascript">
  		$().ready(function() {
			var $zhezhao = $("#zhezhao");
			
			//普通遮罩
  			$("#btn1").click(function() {
  				$zhezhao.fadeTo(100, 0.1, function() {
 	 				$("#div1").show();
  				});
  			});
			
			//定时隐藏
			$("#btn2").click(function() {
				$zhezhao.fadeTo(100, 0.1, function() {
					$("#div1").show();
					setTimeout(function() {
			  			$("#div1").fadeOut(1000);
		  				$zhezhao.fadeOut(1000);
					},3000);
				});
			});
			
  			
  			$(".h").click(function() {
  				$zhezhao.fadeOut(10, function() {
	  				$("#div1").hide();
  				});
  			});
  		});
  	</script>
  </head>
  
  <body>
    jQuery制作遮罩<br>
    <p><input type="button" value="普通遮罩" id="btn1"/></p>
    <p><input type="button" value="定时隐藏" id="btn2"/></p>
    
    <div id="zhezhao"></div>
    <div id="div1" style="display:none;border:1px solid #ea6f3e;width:200px;position:absolute;top:40%;left:40%;z-index:1000;background-color:#fff;">
    	<h4>遮罩层</h4>
    	<p><input type="button" value="隐藏" class="h"/></p>
    	<input type="text" value="111"/>
    </div>
  </body>
</html>
